<script lang="ts" setup>
import { NDivider } from "naive-ui";
import { useDesignStore } from "@/stores/module/design";
import { toRefs } from "vue";
import LabelSwitch from "./LabelSwitch.vue";
import { useI18n } from "@/hooks/useI18n";

const { t } = useI18n();

const {
  isShowBreadcrumb,
  setIsShowBreadcrumb,
  isShowBreadcrumbIcon,
  setIsShowBreadcrumbIcon,
  isGreyMode,
  setIsGreyMode,
  isShowLogo,
  setIsShowLogo,
  isShowTagView,
  setIsShowTagView,
} = toRefs(useDesignStore());
</script>

<template>
  <div>
    <NDivider> 页面显示 </NDivider>
    <LabelSwitch :label="t('design.logo')" :value="isShowLogo" @change="setIsShowLogo" />
    <LabelSwitch :label="t('design.breadCrumb')" :value="isShowBreadcrumb" @change="setIsShowBreadcrumb" />
    <LabelSwitch :label="t('design.breadCrumbLogo')" :value="isShowBreadcrumbIcon" @change="setIsShowBreadcrumbIcon" />
    <LabelSwitch :label="t('design.greyMode')" :value="isGreyMode" @change="setIsGreyMode" />
    <LabelSwitch :label="t('design.labelPage')" :value="isShowTagView" @change="setIsShowTagView" />
  </div>
</template>

<style lang="less" scoped></style>
